<template>
	<view class="main">
		<view class="main_body">
			<view class="content">
				<view class="head">
					<text class="title">验证码验证</text>
					<text class="subtitle">验证码已发送至 {{ maskedPhone }}</text>
				</view>
				<view class="item_body" >
					<view class="baikuang" v-for="(item, index) in 4" :key="index">
						<input class="item_input" placeholder-style="color:#FFF" type="text" v-model="code[index]"  maxlength="1"   placeholder=""  @input="(e) => onCodeInput(e, index)" @paste="onPaste" :data-index="index" :id="`codeInput${index}`"  :focus="focusIndex === index"  />
						<view class="underline"></view>
					</view>
					<!-- <button class="loginbut" @click="submitCode">提交</button> -->
				</view>
				 <!-- 重新发送验证码 -->
				    <view class="resend-container">
				      <text class="resend-text" @tap="onResendCode">
				        {{ countdown > 0 ? countdown + "秒后重新发送" : "重新发送" }}
				      </text>
				    </view>
				
				    <!-- 下一步按钮 -->
				    <button class="loginbut" @click="onNext" :disabled="!isCodeComplete">
				      下一步
				    </button>
				
				    <!-- 底部功能 -->
				    <view class="footer">
				      <text class="footer-text" @tap="onCannotReceiveSMS">接收不到短信</text>
				      <text class="footer-text" @tap="onVoiceCode">语音接验证码</text>
				    </view>
			</view>
		</view>
	</view>
</template>

<script>
	import util from "@/utils/utils.js";
	export default {
		data() {
			return {
				phone: '', // 从登录页面传递过来的手机号
				maskedPhone: '', // 脱敏后的手机号
				focusIndex: 0, // 焦点索引控制
				code: ['', '', '', ''], // 确保是空字符串 // 验证码
				countdown: 60, // 倒计时
				timer: null, // 定时器
				isCodeComplete: false, // 验证码是否输入完成
				isHandlingBackspace: false, // 是否正在处理退格键
			};
		},
		onLoad(options) {
		    // 获取传递的手机号
		    const phone = options.phone || '';
		    const maskedPhone = phone.replace(/(\d{3})\d{4}(\d{4})/, '$1****$2');
		    this.phone = phone;
		    this.maskedPhone = maskedPhone;
		
		    // 启动倒计时
		    this.startCountdown();
		  },
		/* onLoad(options) {
			// 获取从登录页面传递过来的手机号
			this.phone = options.phone;
		}, */
		methods: {
			// 验证码输入事件
			    onCodeInput(e, index) {
			      if (this.isHandlingBackspace) {
			        return; // 如果正在处理退格键，则不执行自动跳转逻辑
			      }
			      let value = e.detail.value.replace(/\D/g, ''); // 过滤非数字
				  this.code[index] = value; // 直接赋值
			      // const code = this.code.slice();
			
			      // 判断是否是退格键操作
			      // if (value === '' && code[index] !== '') {
					if (value === '') {
			        // 如果当前输入框的值被清空，说明用户按下了退格键
			        console.log('Backspace detected at index:', index);
					if (index > 0) {
					  this.code[index] = '';
					  this.focusIndex = index - 1;
					} else {
					  this.code[index] = '';
					}
			        /* if (index > 0) {
			          code[index] = ''; // 清空前一个输入框的值
			          this.code = code;
			          this.focusIndex = index - 1; // 聚焦到前一个输入框
			        } */
			      } else {
			        // 更新对应位置的验证码
			        this.code[index] = value;
			        // this.code = code;
			
			        // 自动跳转逻辑
			        if (value && index < 3) {
			          this.focusIndex = index + 1;
			        }
			      }
			
			      // 检查验证码是否输入完成
			      this.checkCodeComplete();
			    },
			
			    // 粘贴处理
			    onPaste(e) {
			      const pasteData = e.detail.value.replace(/\D/g, ''); // 过滤非数字
			      const code = this.code.slice();
			
			      // 分配粘贴内容到输入框
				  for (let i = 0; i < 4; i++) {
				    if (i < pasteData.length) {
				      code[i] = pasteData[i];
				    } else {
				      code[i] = '';
				    }
				  }
			      /* for (let i = 0; i < 4; i++) {
			        code[i] = pasteData[i] || '';
			      } */
			      this.code = code;
			      this.focusIndex = Math.min(3, pasteData.length - 1); // 聚焦到最后一个输入框
			
			      // 检查验证码是否输入完成
			      this.checkCodeComplete();
			    },
			
				/* computed: {
				  isCodeComplete() {
				    return this.code.every((c) => c !== '');
				  },
				}, */
			   // 检查验证码是否输入完成
			    checkCodeComplete() {
			      const isComplete = this.code.every((c) => c !== '');
			      this.isCodeComplete = isComplete;
			    },
			
			    // 重新发送验证码
			    onResendCode() {
			      if (this.countdown > 0) return;
			
			      // 模拟重新发送验证码
			      uni.showToast({
			        title: '验证码已发送',
			        icon: 'none',
			      });
			
			      // 重置倒计时
			      this.countdown = 60;
			      this.startCountdown();
			    },
			
			    // 启动倒计时
			    startCountdown() {
			      this.timer = setInterval(() => {
			        if (this.countdown <= 0) {
			          clearInterval(this.timer);
			          return;
			        }
			        this.countdown--;
			      }, 1000);
			    },
				//跳转页面，清除定时器
				onUnload() {
				  if (this.timer) {
				    clearInterval(this.timer);
				  }
				},
			    // 下一步按钮点击事件
			    onNext() {
			      const { code } = this;
			
			      // 校验验证码
			      if (!this.isCodeComplete) {
			        uni.showToast({
			          title: '请输入完整的验证码',
			          icon: 'none',
			        });
			        return;
			      }
			
			      // 模拟验证成功
			      uni.showToast({
			        title: '验证成功',
			        icon: 'success',
			      });
			
			      uni.navigateTo({
			        url: '/pages/login/role',
			      });
			    },
				
			
			    // 接收不到短信
			    onCannotReceiveSMS() {
			      /* uni.showToast({
			        title: '接收不到短信',
			        icon: 'none',
			      }); */
				  uni.showActionSheet({
						  alertText:'接受不到短信，你可以',
				          itemList: [ '更换手机号', '取消'], // 菜单选项
				          success: (res) => {
				            const index = res.tapIndex; // 用户选择的选项索引
				            if (index === 0) {
				              // 更换手机号
				              this.changePhoneNumber();
				            }
				            // 如果选择“取消”，什么都不做
				          },
				          fail: (err) => {
				            console.log('用户取消了选择', err);
				          },
				        });
			    },
				
				 // 更换手机号
				    changePhoneNumber() {
				      uni.navigateTo({
				        url: '/pages/login/change-phone', // 跳转到更换手机号页面
				      });
				    },
				
			    // 语音接验证码
			    onVoiceCode() {
			      uni.showToast({
			        title: '语音接验证码',
			        icon: 'none',
			      });
			    },
			// 提交验证码
			/* onNext() {
				if (!this.form.code) {
					return uni.showToast({
						icon: 'none',
						title: '请输入验证码',
					});
				}
				// 调用验证码验证接口
				// 这里可以调用 API 进行验证码验证
				uni.showToast({
					icon: 'success',
					title: '验证成功',
				});
				// 验证成功后跳转到首页或其他页面
				setTimeout(() => {
					uni.redirectTo({
						url: '/pages/index/index',
					});
				}, 1500);
			},*/
		}, 
	};
</script>

<style>
	.head {
		width: 100%;
		/* padding-top: 124rpx; */
		margin-bottom: 20px;
	}

	.title {
		width: 150px;
		height: 28px;
		font-family: PingFang SC;
		font-weight: 500;
		font-size: 20px;
		line-height: 28px;
		letter-spacing: 0px;
		color: #000;
		display: block;
		margin-bottom: 5px;
	}

	.subtitle {
		width: 182px;
		height: 18px;
		font-family: PingFang SC;
		font-weight: 400;
		font-size: 13px;
		line-height: 18.2px;
		letter-spacing: 0%;
		color: #333;
	}

	.item_body {
		display: flex;
		  justify-content: space-between;
		  align-items: center;
		  margin-bottom: 20px;
	}

	.item_body .baikuang {
		display: flex;
		  flex-direction: column;
		  align-items: center;
			width: 100%;
			position: relative;
	}

	.item_body .baikuang .item_input {
		width: 50px;
		  height: 50px;
		  text-align: center;
		  font-size: 20px;
		  border: none;
		  outline: none;
	}

	/* 输入框下方的横线 */
	.underline {
	  width: 65px;
	  height: 1px;
	  background-color: #ddd;
	  margin-top: 10px;
	}

	/* 重新发送验证码 */
	.resend-container {
	  text-align: center;
	  margin-bottom: 30px;
	}
	
	.resend-text {
	  font-size: 12px;
	  color: #333;
	}

	.loginbut {
		width: 100%;
		height: 80rpx;
		line-height: 80rpx;
		background: linear-gradient(90deg, #9A9AFF 0%, #D6D6FE 100%);
		border-radius: 32px;
		font-size: 32rpx;
		color: #fff;
		text-align: center;
	}
	
	.loginbut[disabled] {
	  background-color: #ccc;
	}
	
	/* 底部功能 */
	.footer {
	  display: flex;
	  justify-content: space-between;
	  align-items: center;
	  margin-top: 20px;
	}
	
	.footer-text {
	  font-size: 12px;
	  color: #666;
	}
</style>